import React from 'react';
import {
    Row,
    Col,
    Table,
    Form,
    Card,
    DatePicker
} from 'antd';
import axios from 'axios';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import './less/common.less';
const { RangePicker } = DatePicker;

class BalanceAlarms extends React.Component {
    constructor(props) {
        super(props);
        const user = JSON.parse(sessionStorage.getItem("user"));
        this.state = {
            dataSource: [],
            loading: true,
            user: user,
            pagination: {
                current: 1,
                pageSize: 10
            },
            keyword: ''

        };
    };
    componentDidMount() {
        this.getBalance();
    }

    search(value) {
        this.setState({ keyword: value });
        this.getBalance({ keyword: value });
    }
    onChange = (date, dateString) => {
        this.getBalance(dateString[0], dateString[1])
    }

    getBalance(startTime, endTime) {
        const token = sessionStorage.getItem("token");
        axios.get(`${config.api}Marketing/GetWxLoginInfo?start=${startTime}&end=${endTime}`, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            if (data.data.result) {
                data.data.loginInfo.forEach(function (item, i) {
                    item.key = i
                })
                this.setState({ dataSource: data.data, loading: false });
            }
        })
        .catch(err => {
            intercept
        })
    }

    render() {
        const column = [
            {
                title: "日期",
                dataIndex: "date",
                width:120
            }, {
                title: "登陆次数",
                dataIndex: "loginTimes",
                width:80
            }, {
                title: "登陆人数",
                dataIndex: "loginPersons",
                width:80
            }, {
                title: "新增人数",
                dataIndex: "newPersons",
                width:80
            }
        ];

        const columntwo = [
            {
                title: "推广人",
                dataIndex: "item",
                width:220
            }
        ].concat(column);

        return (
            <div style={{backgroundColor:'#fff',paddingTop:'20px'}}>
                <RangePicker className="time" onChange={this.onChange} />
                <Row gutter={16}>
                    <Col span={8}>
                        <Card  className="firstcard" bordered={false} loading={this.state.loading} >
                            <p className="listtitle"style={{backgroundColor:'#6b79e8'}}>小程序登录统计</p>
                            <Table className="tables" style={{backgroundColor:'#f6f7ff'}}
                                rowKey= { record => record.date}
                                columns={column}
                                dataSource={this.state.dataSource.loginInfo} />
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card className="twocard" bordered={false} loading={this.state.loading}>
                        <p className="listtitle"style={{backgroundColor:'#f9a376'}}>二维码统计</p>
                            <Table className="tables"  style={{backgroundColor:'#fff8f5'}}
                                rowKey= { record => record.date}
                                columns={columntwo}
                                dataSource={this.state.dataSource.qrcodeInfo} />
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card  className="secondcard" bordered={false} loading={this.state.loading}>
                        <p className="listtitle"style={{backgroundColor:'#24ca82'}}>分享统计</p>
                            <Table className="tables"  style={{backgroundColor:'#f5fffb'}}
                                rowKey= { record => record.date}
                                columns={columntwo}
                                dataSource={this.state.dataSource.shareInfo} />
                        </Card>
                    </Col>
                </Row>

            </div>
        )
    }

}
const BalanceAlarm = Form.create()(BalanceAlarms);
export default BalanceAlarm
